<template>
	<div class="template">
		<el-image class="topimg" :src="require('@/assets/image/login/topimg.png')" fit="cover"></el-image>
		<div class="contFrom">
			<div class="fromTitle">请设置密码</div>
			<div class="fromTitleText">登录密码用于手机和电脑数字果园登录</div>
			<!-- <el-form label-width="0px" :model="formLabelAlign"> -->

			<div label="" class="formList">
				<el-input type="text" size=" " v-model="formLabelAlign.name" auto-complete="new-name" placeholder="请输入姓名"></el-input>
			</div>
			<div label="" class="formList">
				<el-input :type="setPwdOne?'text':'password'" size=" " auto-complete="new-password" v-model="formLabelAlign.password"
				 placeholder="请输入新密码">
					<el-image slot="suffix" v-show="!setPwdOne" class="inputImg" @click="setPwdOne = true" :src="require('@/assets/image/login/eyeClose.png')"
					 fit="cover"></el-image>
					<el-image slot="suffix" v-show="setPwdOne" class="inputImg" @click="setPwdOne = false" :src="require('@/assets/image/login/eyeOpen.png')"
					 fit="cover"></el-image>
				</el-input>
			</div>
			<div label="" class="formList">
				<el-input :type="setPwdTwo?'text':'password'" size=" " auto-complete="new-password" v-model="formLabelAlign.affirmPassword"
				 placeholder="再次输入您的密码">
					<el-image slot="suffix" v-show="!setPwdTwo" @click="setPwdTwo = true" class="inputImg" :src="require('@/assets/image/login/eyeClose.png')"
					 fit="cover"></el-image>
					<el-image slot="suffix" v-show="setPwdTwo" @click="setPwdTwo = false" class="inputImg" :src="require('@/assets/image/login/eyeOpen.png')"
					 fit="cover"></el-image>
				</el-input>
				<span class="formItemSpan">密码长度至少8位数，可以是特殊符号、数字、字母等。</span>
			</div>
			<div label="" class="formList">
				<addressD :value='addressValue' @getAddressData="getAddressData"></addressD>
				<!-- <area-cascader v-model="formLabelAlign.addressData" :key="areaCascaderKey" :data="$pcaa" :level="2" type="all" icon="el-icon-arrow-down"
				 placeholder="请选择当前住址"></area-cascader> -->
			</div>
			<div label="" class="formList">
				<el-button class="submitBtn" type="primary" size=" " @click="submitBtn">完成</el-button>
			</div>
			<!-- </el-form> -->
		</div>
		<footers></footers>
	</div>
</template>

<script>
	import footers from '../components/footers.vue'
	import addressD from '../../../components/address'
	export default {
		components: {
			footers,
			addressD
		},
		data() {
			return {
				formLabelAlign: {
					name: '',
					code: '',
					phone: '',
					password: '',
					affirmPassword: '',
					addressData: [],
					address: [],
					addressNum: []
				},
				addressValue:[],
				setPwdOne: false,
				setPwdTwo: false,
				areaCascader: '', // 地址选择器时候显示下拉框
				areaCascaderKey: new Date().getTime()
			}
		},
		created(){
		},
		mounted() {
			this.formLabelAlign.phone = this.$route.query.phone
			this.formLabelAlign.code = this.$route.query.code
			// this.formLabelAlign.address = cityData.cid
		},
		watch: {
			areaCascader(newData) {
				// console.log(a, 111)
				if (!newData && !this.formLabelAlign.addressData) {
					this.areaCascaderKey = new Date().getTime()
				}
			},
		},
		methods: {
			getAddressData(e){
				console.log(e);
				this.formLabelAlign.addressNum = e.key.split('/')
				let arr = e.text.split('/')
				this.formLabelAlign.addressNum.forEach((item,index) =>{
					const key = item
					let arr2 = {}
					arr2[key] = arr[index]
					arr[index] = arr2
				})
				this.formLabelAlign.addressData = arr
			},
			submitBtn() {
				if (this.efficacy()) {
					this.formLabelAlign.addressData.forEach((v, i) => {
						for (let key in v) {
							this.formLabelAlign.address.push(v[key])
							// this.formLabelAlign.addressNum.push(key)
						}
					})
					this.formLabelAlign.address = this.formLabelAlign.address.join('/')
					
					this.formLabelAlign.city = Object.values(this.formLabelAlign.addressData[0])[0]
					this.formLabelAlign.street = Object.values(this.formLabelAlign.addressData[3])[0]
					this.$nextTick(() => {
						this.$request.postForm(this.$api.register, this.formLabelAlign).then(res => {
							if (res.code == 200) {
								this.$message.success('设置成功')
								setTimeout(() => {
									this.$router.replace('/login')
								}, 700)
							}
						}).catch(err => {
							this.$router.replace('/signin')
						})
					})

				}
			},
			efficacy() {
				let reg = /^([^\s|\u4E00-\u9FA5]{8,})*$/
				if (this.formLabelAlign.name == '') {
					this.$message.error('请输入姓名')
					return false
				} else if (!reg.test(this.formLabelAlign.password) || !reg.test(this.formLabelAlign.affirmPassword)) {
					this.$message.error('密码输入错误，请核对后再提交')
					return false
				} else if (this.formLabelAlign.password != this.formLabelAlign.affirmPassword) {
					this.$message.error('两次密码输入不一致，请核对后再提交')
					return false
				} else if (this.formLabelAlign.addressData == '') {
					this.$message.error('请选择地址')
					return false
				} else {
					return true
				}
			}
		}
	}
</script>

<style scoped="scoped">
	/* body>>>#app{
		background: #FFFFFF !important;
	} */
	.template {
		width: 100%;
		min-height: 100vh;
	}

	.topimg {
		width: 100%;
		height: 400px;
	}

	.formList {
		margin-bottom: 18px;
	}

	.contFrom {
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		width: 500px;
		margin-top: 30px;
		margin-bottom: 80px;
	}

	.fromTitle {
		color: #333333;
		font-size: 30px;
	}

	.fromTitleText {
		color: #919593;
		font-size: 14px;
		margin-bottom: 40px;
	}

	.formItemSpan {
		color: #919593;
		font-size: 14px;
	}

	.code-box {
		text-align: right;
	}

	.submitBtn {
		width: 100%;
	}

	.time {
		color: #23B14D;
	}

	.timeBox {
		color: #919593;
		font-size: 12px;
	}

	.timeBoxs {
		margin-top: -30px;
	}

	.inputImg {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		cursor: pointer;
	}
</style>
